<template>
  <div>
    <div class="knowledge_base">
      <div>
        <div class="left_div">
          <div
            class="left_div_box"
            :class="[wikiTypeValue == item.val ? 'left_div_box_active' : '']"
            v-for="(item, index) in knowledgeList"
            :key="index"
            @click="handleClassifyClick(item.val)"
          >
            <el-icon class="icon_sanjiao">
              <CaretRight />
            </el-icon>
            <div class="icon">
              <el-icon><Management /></el-icon>
            </div>
            <div class="title_box">
              <div class="title1">{{ item.lable }}</div>
              <div v-if="index < classifyLists.length" class="title2">{{ classifyLists[index] }}</div>
              <div v-else class="title2">向我提出任何问题</div>
            </div>
          </div>
        </div>
      </div>

      <div class="knowledge_list_box" v-if="Authorizedlist.length != 0">
        <div class="knowledge_list">
          <div class="knowledge_item" v-for="(item, index) in Authorizedlist" :key="index">
            <div class="first_one_row">
              <!-- <img src="../../../assets/images/chatgpt/bg2.png" class="img_box" alt=""> -->
              <div class="icon_box">
                <svg-icon icon-class="qa"></svg-icon>
              </div>
              <div class="title_box">
                <div class="title1">{{ item.appName }}</div>
                <div class="title2" :title="item.description">{{ item.description }}</div>
              </div>
            </div>
            <div class="knowledge_item_btn">
              <!-- <div class="start_btn" :class="[AuthorizedId == item.id ? 'start_btn_active' : '']" -->
              <div class="hot_class">
                <img src="../../../assets/images/chatgpt/hot.png" alt="" />
                <span>{{ numToUnit(item.rcount) }}</span>
              </div>
              <div class="start_btn start_btn_active" @click="startChatClick(item, index)">开始问答</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="knowledge_list_empty">
        <el-empty description="暂无数据" style="margin: 0 auto" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { aiqaWikiAppsAuthorized } from '@/api/expert/expertApi';
import useUserStore from '@/store/modules/user';
import { getDicts } from '@/api/system/dict/data';

const userStore = useUserStore();
const wikiTypeValue = ref(1);
const classifyLists = ref(['个性化定制大模型']);
const { proxy } = getCurrentInstance() as any;
const AuthorizedId = ref('');
const wiki_type: any = ref();
const Authorizedlist = ref([]);

const knowledgeList = ref([
  { val: 1, lable: '公开知识' },
  { val: 0, lable: '我的知识' }
]);

const emit = defineEmits(['startChatClick']);
// 获取字典
// const fetchWikiType = async () => {
//   await handleClassifyClick(wiki_type.value[0].dictValue);
// };
// 切换分类
const handleClassifyClick = async (val: any) => {
  wikiTypeValue.value = val;
  await aiqaWikiAppsAuthorized({
    open: wikiTypeValue.value
  }).then((res: any) => {
    Authorizedlist.value = res.data;
  });
};

//开始聊天按钮
const startChatClick = (item: any, index: any) => {
  AuthorizedId.value = item.id;
  emit('startChatClick', item);
};

//数字转换单位
const numToUnit = (num: any) => {
  if (num < 1000) {
    return num;
  } else if (num >= 1000 && num < 10000) {
    return (num / 1000).toFixed(1) + 'K';
  } else {
    return (num / 10000).toFixed(1) + 'W';
  }
};
onMounted(async () => {
  await handleClassifyClick(wikiTypeValue.value);
});
</script>

<style scoped lang="scss">
@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}

.knowledge_base {
  margin: 0 auto;
  width: 1000px;
  margin-top: 70px;
  display: flex;

  .left_div {
    width: 175px;
    // border: 1px solid #f08f00;
    box-shadow: 0px 0px 10px 0px rgba(240, 143, 0, 0.2);
    border-radius: 8px;
    background-color: #ffffff;
    height: 400px;

    .left_div_box {
      // border-radius: 8px;
      display: flex;
      align-items: center;
      padding: 20px 12px;
      background-color: #ffffff;
      position: relative;
      cursor: pointer;
      transition: all 0.2s;
      border-bottom: 1px solid #ededed;

      .icon {
        width: 30px;
        height: 30px;
        line-height: 34px;
        text-align: center;
        border-radius: 4px;
        background-color: #fdeed9;
        color: #f08f00;
      }

      .title_box {
        margin-left: 8px;

        .title1 {
          font-size: 14px;
        }

        .title2 {
          font-size: 12px;
          color: #c0c0c0;
          margin-top: 1px;
        }
      }

      .icon_sanjiao {
        position: absolute;
        right: -9px;
        top: 50%;
        transform: translate(0, -50%);
        color: #f08f00;
        visibility: hidden;
        // transition: all 0.3s;
      }
    }

    .left_div_box:first-child {
      border-radius: 6px 6px 0 0;
    }

    .left_div_box:last-child {
      border-radius: 0 0 8px 8px;
      border: 0;
    }

    .left_div_box:hover {
      background-color: #fa9e14;

      .title1,
      .title2 {
        color: #ffffff;
      }

      .icon {
        background-color: #fab44b;
        color: #ffffff;
      }
    }

    .left_div_box:hover .icon_sanjiao {
      visibility: visible;
    }

    .left_div_box_active {
      background-color: #fa9e14;

      .title1,
      .title2 {
        color: #ffffff !important;
      }

      .icon {
        background-color: #fab44b;
        color: #ffffff;
      }

      .icon_sanjiao {
        visibility: visible;
      }
    }
  }
}

.knowledge_list_empty {
  margin-left: 20px;
  width: 800px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
}
.knowledge_list_box {
  background-color: #ffffff;
  height: 412px;
  border-radius: 8px;
  margin-left: 20px;
  width: 800px;
}
.knowledge_list {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-height: 412px;
  overflow-y: auto;

  .knowledge_item {
    background-color: #f7f8fa;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    padding: 10px;

    .first_one_row {
      display: flex;

      .img_box {
        width: 60px;
        height: 60px;
        border-radius: 8px;
      }

      .icon_box {
        width: 60px;
        height: 60px;
        background-color: #fdeed9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
      }

      .title_box {
        margin-left: 8px;
        width: calc(100% - 70px);
      }

      .title1 {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        @include textOverflow(1);
      }

      .title2 {
        font-size: 12px;
        color: #666;
        margin-top: 6px;
        @include textOverflow(2);
      }
    }

    .knowledge_item_btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;

      .hot_class {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;

        img {
          width: 13px;
          margin-right: 4px;
        }
      }

      .start_btn {
        font-size: 12px;
        border-radius: 11px;
        padding: 2px 14px 3px;
        background-color: #e8e8e8;
        border: 1px solid #eaeaea;
        display: flex;
        width: 78px;
        color: #aeaeae;
        cursor: pointer;

        &:hover {
          background-color: #f6ede1;
          border: 1px solid #f3c076;
          color: #f3c076;
        }
      }

      .start_btn_active {
        background: rgba(240, 143, 0, 0.1);
        border: 1px solid #f08f00;
        color: #f3c076;
      }
    }
  }
}
</style>
